<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>防抖的实现</title>
    <style>
      .box {
        width: 500px;
        height: 500px;
        background-color: #ccc;
        color: red;
        text-align: center;
        line-height: 500px;
        font-size: 100px;
      }
    </style>
  </head>
  <body>
    <!-- 
        ☆ 防抖的实现
            当在规定时间内多次执行某事件，他只执行最后一次

        实现方式：
            方式一： 通过lodash 中的库
            方式二： 自己手写一个防抖函数
     -->
    <div class="box"></div>
    <script src="http://cdn.staticfile.org/lodash.js/4.17.21/lodash.min.js"></script>
    <script>
      // 方式一：使用lodash库实现防抖函数
      // 语法：_debounce(fun,时间)
      const box = document.querySelector(".box");
      let i = 1;
      function mouseMove() {
        box.innerHTML = i++;
      }
      // ☆ 一定要写完整的函数
      //   box.addEventListener("mousemove", _.debounce(mouseMove, 500)); // _.debounce() 中要写一个完整的函数
    </script>

    <script>
      // 方式二： 手写防抖函数
      function debounce(fun, t) {
        let timer;
        // 返回一个匿名函数，因为外部直接就是调用，如果不返回函数，他执行一次后就不会再执行了
        return function () {
          if (timer) clearTimeout(timer);
          timer = setTimeout(function () {
            fun();
          }, t);
        };
      }
      box.addEventListener("mousemove", debounce(mouseMove, 500));
    </script>
  </body>
</html>
